<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerX="false"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
<script type="text/javascript" src="../../libs/js/graphical/raphael.js"></script>
<script type="text/javascript" src="../../libs/js/graphical/svgmap.js"></script>
<script type="text/javascript" src="../../libs/js/graphical/map_data/china.js"></script>

<style type="text/css">
			.demo {
				width: 600px;
				margin: 40px auto 0 auto;
				font-size: 14px;
				position: relative;
			}
			#label {
				width: 200px;
				height: 25px;
				line-height: 25px;
				margin: 10px auto
			}
			
			#label span {
				height: 25px;
				width: 25px;
				display: block;
				float: left;
				text-align: center
			}

			.map_icon{
				position: absolute;
				width: 24px;
				height: 40px;
				background-image: url(../../libs/images/icons/fi1.png);
				background-repeat: no-repeat;
				cursor: pointer;
				cursor: hand;
			}
			.map_icon:hover{
				background-image: url(../../libs/images/icons/fi2.png);
			}
			.maingrid_content{
				position: absolute;
				top: 0;
				right: 0;
				width: 50%;
				height: 100%;
				border: 1px solid #EEEEEE;
				z-index: 99999;
				margin-right: -100%;
		    	box-shadow: -1px 0 3px #d3d8db;
		    	 display: none;
			}
			




			.svgmap{position: relative; }
			.mapTip{
				display:none; 
				position:absolute; 
				padding:8px; 
				border: 1px solid #c4d0df;
				background: #f7f8fa;
				box-shadow: 0 0 6px 1px rgba(0,0,0,.08);
				border-radius: 5px;
				}

			.mapTip .arrow,
			.mapTip .arrowMask{ 
				position: absolute; 
				width: 0; 
				height: 0; 
				border-color: transparent; 
				border-style: solid;
			}
			.mapTip .arrow{ 
				bottom: -7px; 
				left: 50%; 
				margin-left: -7px; 
				border-width: 7px; 
				border-top-color: #c4d0df; 
				border-bottom-width: 0;
			}
			.mapTip .arrowMask{
				bottom: 1px; 
				border-width: 6px; 
				margin-left: -6px; 
				border-top-color: #f7f8fa; 
				border-bottom-width: 0;
			}
		</style>
	</head>
	<body>
<div class="page_content">	
		<div class="groupTitle"><span>示例说明</span></div>
		动态添加标记，点击标记查看详情
		<div class="demo">
			
			<div id="chinaMap1"></div>
		</div>
</div>
		

		<script type="text/javascript">
			var mapData={
						'heilongjiang': {'stateInitColor': 3,'visit':800},
						'beijing': {'stateInitColor': 2,'visit':300},
						'shanghai': {'stateInitColor': 3,'visit':400},
						'tianjin': {'stateInitColor': 4,'visit':900},
						'sichuan': {'stateInitColor': 2,'visit':200},
						'chongqing': {'stateInitColor': 2,'visit':300},
						'shanxi': {'stateInitColor': 2,'visit':200},
						'shandong': {'stateInitColor': 5,'visit':1323,'name':'山东'},
						'shanxi': {'stateInitColor': 3,'visit':800},
						'zhejiang': {'stateInitColor': 4,'visit':900},
						'hunan': {'stateInitColor': 4,'visit':900},
						'neimenggu': {'stateInitColor': 3,'visit':500},
						'henan': {'stateInitColor': 3,'visit':600},
						'gansu': {'stateInitColor': 4,'visit':800},
						'ningxia': {'stateInitColor': 2,'visit':200},
						'qinghai': {'stateInitColor': 5,'visit':1020,'name':'青海'},
						'xinjiang': {'stateInitColor': 4,'visit':800},
						'jilin': {'stateInitColor': 3,'visit':500},
						'liaoning': {'stateInitColor': 3,'visit':200},
						'xizang': {'stateInitColor': 4,'visit':1100,'name':'西藏'},
						'hubei': {'stateInitColor': 4,'visit':1000,'name':'湖北'},
						'guizhou': {'stateInitColor': 4,'visit':800},
						'jiangxi': {'stateInitColor': 3,'visit':600},
						'fujian': {'stateInitColor': 3,'visit':600},
						'yunnan': {'stateInitColor': 3,'visit':600},
						'hebei': {'stateInitColor': 1,'visit':100},
						'shaanxi': {'stateInitColor': 0,'visit':50},
						'guangxi': {'stateInitColor': 3,'visit':600},
						'guangdong': {'stateInitColor': 3,'visit':600},
						'hainan': {'stateInitColor': 3,'visit':600},
						'taiwan': {'stateInitColor': 3,'visit':600},
						'jiangsu': {'stateInitColor': 3,'visit':600},
						'anhui': {'stateInitColor': 3,'visit':600},
						'aomen': {'stateInitColor': 5,'visit':900},
						'xianggang': {'stateInitColor': 5,'visit':900}
					};
			$(function(){
				var strokeWidth;
				if(broswerFlag=="IE7"||broswerFlag=="IE8"){
					strokeWidth=1;
				}
				else{
					strokeWidth=5;
				}
	  			var mapRegion=$('#chinaMap1').SVGMap({
	  				external:true,
					mapName: 'china',
					mapWidth: 600,
					mapHeight: 500,
					strokeWidth:strokeWidth,
					showName:true,
					showCapital:false,
					showTip:false,
					enableHover:false,
		            showNameAttr: {
						'fill': '#0f1c3f',
						'font-family': 'Microsoft yahei',
						'font-size': 20,
						'font-weight': 'normal'
					},
					stateHoverColor: '#0080ff'

				});

				for(k in mapData){

					if(mapData[k].visit>900){
						var icon=$('<div class="map_icon"></div>');
						
						$("body").append(icon);
						icon.attr("title",mapData[k].name+"："+mapData[k].visit);
						icon.tip();
						var x=$(mapRegion.externalData[k].node).offset().left;
						var y=$(mapRegion.externalData[k].node).offset().top;
						if(k=="xizang"){
							x=x+100;
							y=y;
						}
						else if(k=="qinghai"){
							x=x+50;
							y=y;
						}
						else if(k=="shandong"){
							x=x+30;
							y=y;
						}
						else if(k=="hubei"){
							x=x+40;
							y=y;
						}
						
						icon.css({
							left: x,
							top: y
						});
						icon.click(function(event) {
							$(".maingrid_content").show();
							$(".maingrid_content").find("iframe").attr("src","../../sample_skin/normal/graphical-map-content.html");
							$(".maingrid_content").stop().animate({marginRight:"0"},500);
						});
						
					}
					
				}


				$("body").append('<div class="maingrid_content"><IFRAME style="box-sizing: border-box; background: white;" height="100%" width="100%" frameBorder=0 id=frmright name=frmright src="" allowTransparency="true"></IFRAME></div>');
				 $("body").click(function(e) { //点击iframe页面响应
			         if($(e.target).attr("class")!="map_icon"){
			         	$(".maingrid_content").stop().animate({marginRight:"-100%"},300,function(){
			         		$(".maingrid_content").hide();
			         	});
			         }
			        
			       });

				
		});
		function customHeightSet(contentHeight){
		    $(".maingrid_content").height(contentHeight-5)

		 }	


		</script>
	</body>
</html>